<template>
  <div class='container' style="padding: 20px;">
    <el-card>
      <el-row style="margin-bottom:10px ;" type="flex" justify="end">
        <el-col style="width:117px">
          <el-button icon="el-icon-edit" type='success' @click="$router.push(`/questions/new`)">新增试题</el-button>
        </el-col>
      </el-row>
      <!-- 表单 -->
      <el-form ref="form" :model="form" class="form" label-width="80px" inline>
        <el-form-item prop="subjectID" label="学科">
            <el-select @click.native="getsubject" v-model="form.subjectID" style="width:100%" placeholder="请选择">
              <el-option v-for="item in subjectlist" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="catalogID" label="二级目录" >
            <el-select @click.native="getcatalog" v-model="form.catalogID"  placeholder="请选择">
              <el-option v-if="!form.subjectID" label="" value="请先选择学科" disabled/>
              <el-option v-else v-for="item in cataloglist" :key="item.id" :label="item.directoryName" :value="item.id"/>
            </el-select>
        </el-form-item>
        <el-form-item prop="tags" tags label="标签" >
          <el-select @click.native="gettagslist" v-model="form.tags" placeholder="请选择">
            <el-option v-if="!form.subjectID" label="" value="请先选择学科" disabled/>
            <el-option v-else v-for="item in tagslist" :key="item.id" :label="item.tagName" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="keyword" label="关键字" >
          <el-input v-model="form.keyword" />
        </el-form-item>
        <el-form-item prop="questionType" label="试题类型">
        <el-select v-model="form.questionType" placeholder="请选择">
            <el-option v-for="item in questionType" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="difficulty" label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option v-for="item in difficulty" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="direction" label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option v-for="item in direction" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  prop="creatorID" label="录入人">
          <el-select @click.native="getuserlist" v-model="form.creatorID" placeholder="请选择">
            <el-option v-for="item in userlist" :key="item.id" :label="item.username" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="remarks" label="题目备注">
          <el-input v-model="form.remarks" />
        </el-form-item>
        <el-form-item prop="shortName" label="企业简称">
          <el-input  v-model="form.shortName" />
        </el-form-item>
        <span class="select" >
          <el-form-item prop="province" label="城市">
            <el-select v-model="form.province" @click.native="form.city=''">
              <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="city">
            <el-select v-model="form.city">
              <el-option v-if="!form.province" label="" value="请选择省份" disabled/>
              <el-option v-else v-for="item in citys(form.province)" :key="item"  :label="item" :value="item"/>
            </el-select>
          </el-form-item>
        </span>
          <div style="float: right;">
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </div>
      </el-form>
      <el-alert
        style="margin-bottom:20px;"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 表格 -->
       <el-table
        :data="datalist"
        style="width:100%;margin-bottom:20px;">
        <el-table-column label="试题编号" prop="number"/>
        <el-table-column label="学科" prop="subject"/>
        <el-table-column label="目录" prop="catalog"/>
        <el-table-column label="题型">
          <template #default="{row}">{{type(row.questionType)}}</template>
        </el-table-column>
        <el-table-column label="题干" width="300px" prop="question">
           <template #default="{row}">
             <span>{{row.question|html2Text}}</span>
           </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate">
          <template #default="{row}">
            {{row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template #default="{row}">{{level(row.difficulty)}}</template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"/>
        <el-table-column label="操作" width="200px">
          <template #default='{row}'>
            <el-button type="primary" plain  icon="el-icon-view" circle @click="lookitem($event,row)"/>
            <el-button type="success" plain icon="el-icon-edit"  circle @click="$router.push(`/questions/new?id=${row.id}`)"/>
            <el-button type="danger" plain icon="el-icon-delete" circle @click="deleteitem($event,row.id)" />
            <el-button type="warning" plain icon="el-icon-check" circle @click="choice($event,row.id)"/>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div style="float: right;margin-bottom:20px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[1,2,5,10]"
          :page-size="pages.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <Mydialog ref='Mydialog'></Mydialog>
  </div>
</template>

<script>
import Mydialog from './components/Mydialog'
import { list, choiceAdd, remove } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { list as catalog } from '@/api/hmmm/directorys'
import { list as tags } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as userlist } from '@/api/base/users'
export default {
  name: 'questions',
  components: {
    Mydialog
  },
  created () {
    this.changeform = JSON.parse(JSON.stringify(this.form))
    this.getquestions()
  },
  data () {
    return {
      total: 0,
      firstclick: false, // 是否点击了查询
      datalist: [],
      form: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },
      changeform: {},
      pages: {
        page: 1, // 当前页数
        pagesize: 5 // 页展示
      },
      subjectlist: [],
      cataloglist: [],
      tagslist: [],
      difficulty,
      questionType,
      direction,
      provinces: provinces(),
      citys,
      userlist: []
    }
  },
  methods: {
    async getquestions () { // 获取列表
      const obj = {}
      if (this.firstclick) {
        for (const key in this.form) { // 根据新的form表单进行查询
          this.form[key] && (obj[key] = this.form[key])
        }
        this.changeform = JSON.parse(JSON.stringify(this.form))
      } else {
        for (const key in this.changeform) { // 还是当前的筛选值进行跳转
          this.changeform[key] && (obj[key] = this.changeform[key])
        }
      }
      const { data } = await list({ ...this.pages, ...obj })
      this.datalist = data.items
      this.total = data.counts
    },
    handleSizeChange (value) { // 条数
      this.pages.pagesize = value
      this.getquestions()
    },
    handleCurrentChange (value) { // 页数
      this.pages.page = value
      this.getquestions()
    },
    async getsubject () { // 点击获取学科
      this.form.tags = this.form.catalogID = ''
      const { data } = await simple()
      this.subjectlist = data
    },
    search () { // 查找
      this.pages.page = 1
      this.firstclick = true
      this.getquestions()
      this.firstclick = false
    },
    async getcatalog () { // 点击获取目录
      if (!this.form.subjectID) return null
      const { data: { items } } = await catalog({ subjectID: this.form.subjectID })
      this.cataloglist = items
      console.log(items)
    },
    async gettagslist () { // 点击获取标签
      if (!this.form.subjectID) return null
      const { data: { items } } = await tags({ subjectID: this.form.subjectID })
      console.log(items)
      this.tagslist = items
    },
    async getuserlist () { // 点击获取录入人
      const { data: { list } } = await userlist()
      this.userlist = list
      console.log(this.userlist)
    },
    resetForm () { // 重置
      this.$refs.form.resetFields()
      this.pages.page = 1
      this.firstclick = true
      this.getquestions()
      this.firstclick = false
    },
    level (num) { // 难度等级
      const obj = difficulty.find(v => v.value === +num)
      if (!obj) return
      return obj.label
    },
    type (num) { // 问题类型
      const obj = questionType.find(v => v.value === +num)
      if (!obj) return
      return obj.label
    },
    async lookitem (e, value) { // 对话框
      e.target.nodeName === 'BUTTON' ? e.target.blur() : e.target.parentNode.blur()
      const { Mydialog } = this.$refs
      Mydialog.dialogVisible = true
      await Mydialog.getinfo(value)
      Mydialog.type()
    },
    async choice (e, id) { // 精选
      e.target.nodeName === 'BUTTON' ? e.target.blur() : e.target.parentNode.blur()
      const boo = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        type: 'info'
      }).catch(() => {})
      if (!boo) return this.$message.info('取消成功')
      const { data: { success } } = await choiceAdd({ id, choiceState: 1 })
      success && this.$message.success('添加成功')
      console.log(this.pages)
      this.datalist.length === 1 && this.pages.pagesize === 1 && (this.pages.page--)
      this.getquestions()
    },
    async deleteitem (e, id) { // 删除
      e.target.nodeName === 'BUTTON' ? e.target.blur() : e.target.parentNode.blur()
      const boo = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (!boo) return this.$message.info('取消成功')
      const { data: { success } } = await remove({ id })
      success && this.$message.success('删除成功')
      console.log(this.pages)
      this.datalist.length === 1 && this.pages.pagesize === 1 && (this.pages.page--)
      this.getquestions()
    }
  }
}
</script>

<style lang="scss" scoped>
.form{
  ::v-deep .el-form-item{
  margin-right: 0;
  margin-left: 10px;
}
::v-deep .el-input{
  width: 320px ;
  text-align: right;
}
::v-deep.select .el-input{
  width: 155px ;
}
.btn{
  text-align: right;
}
}
::v-deep .is-leaf.el-table__cell{
  background-color: #fafafa;
  border-bottom: 1px solid #eeeeee;
}

</style>
